<template>
  <!-- 如果有子菜单，就渲染成sub-menu（折叠item）-->
  <template v-if="item?.children?.length">
    <el-sub-menu :index="item.path" v-if="!item.hidden">
      <template #title>
        <svg-icon :name="item.meta?.icon || 'fenlei'" />
        <span>{{ item.meta.title }}</span>
      </template>
      <!-- 递归组件 调用自己 -->
      <my-sub-menu
        v-for="i in item.children"
        :key="i.path"
        :item="i"
      ></my-sub-menu>
    </el-sub-menu>
  </template>
  <!-- 否则就渲染成menu-item-->
  <template v-else>
    <el-menu-item :index="item.path" v-if="!item.hidden">
      <svg-icon :name="item.meta?.icon || 'fenlei'" />
      <template #title>
        <span>{{ item.meta.title }}</span>
      </template>
    </el-menu-item>
  </template>
</template>

<script setup>
import MySubMenu from "./sub-menu.vue"; // 导入自己
import svgIcon from "@/components/svgIcon/svg.vue";
defineProps({
  item: {
    type: Object,
    default: () => ({}),
  },
});
</script>
<style lang="scss" scoped>
.el-menu-item,
:deep(.el-sub-menu__title) {
  height: 48px;
  font-size: 16px;
  border-left: 5px solid transparent;
  &:hover {
    color: var(--el-color-primary);
  }
  > span {
    font-size: 16px;
  }
}

.el-menu-item.is-active {
  background-color: var(--el-color-primary-light-9);
  border-left: 5px solid var(--el-color-primary);
}

.el-menu-item:hover {
  color: var(--el-color-primary);
}

.is-active {
  :deep(.el-sub-menu__title.el-tooltip__trigger) {
    background-color: var(--el-color-primary-light-9);
    border-left: 5px solid var(--el-color-primary);
  }
}
</style>
